<template>
  <div>
    <ShopHeader />
    <div class="navbar">
      <el-tabs value='/shop/shopgoods' @tab-click="handleClick">
        <el-tab-pane
          label="点餐"
          name='/shop/shopgoods'
        ></el-tab-pane>
        <el-tab-pane
          label="评价"
          name='/shop/shopcomment'
        ></el-tab-pane>
        <el-tab-pane label="商家" name='/shop/shopowner'></el-tab-pane>
      </el-tabs>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import {mapActions} from 'vuex'
import ShopHeader from "../../components/ShopHeader/ShopHeader";
export default {
  name: "Shop",
  components: {
    ShopHeader,
  },
  mounted() {
    this.GetShopInfo()
  },
  methods: {
    handleClick(tab,event){
      //console.log(tab,event)
      this.$router.push(tab.$options.propsData.name)
    },
    ...mapActions([
      'GetShopInfo'
    ])
  },
};
</script>
<style>
html,body{
  width: 100%;
  height: 100%;
}
/* 修改导航条的默认配置 */
.el-tabs__nav{
  display: flex;
  width: 100%
}
.el-tabs__item{
  flex: 1;
 
  text-align: center;
}
/* 解决导航条默认下面的边距 */
/* 这个在开发环境下设置没问题，但是打包出来没有效果，还是之前默认的距离 */
.el-tabs__header{
  margin: 0 !important;
}

</style>
